<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<link href="images/favicon1.ico" rel="icon" type="image/x-icon"/>
	<link href="images/favicon1.ico" rel="shortcut icon" type="image/x-icon"/>
	<title>智慧办公系统</title>

	<link rel="stylesheet" type="text/css"href="./css/index.css"/>
	<link rel="stylesheet" type="text/css"href="./css/iconfont.css"/>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/login.css">
	<style>
		.bodyimg{
			background-image: url(../../static/images/user/sy.png);
			background-repeat: no-repeat;
			background-size: auto;

		}
		.inp {
			border: 1px solid #cccccc;
			border-radius: 2px;
			padding: 0 10px;
			width: 278px;
			height: 40px;
			font-size: 18px;
		}

		.btn:hover {
			background: #3c83a5;
			color:#fff;
		}

		#captcha {
			width: 300px;
			display: inline-block;
		}

		label {
			vertical-align: top;
			display: inline-block;
			width: 80px;
			text-align: right;
		}

		#wait {
			text-align: left;
			color: #666;
			margin: 0;
		}
		.thisimg:HOVER {
			cursor: pointer;
		}
		.test:FOCUS {
			border-color: #66afe9 !important;
		}
		.modal-dialog {
			width: 500px;
		}

		.modal-body .icon {
			height: 80px;
			width: 80px;
			margin: 20px auto;
			border-radius: 50%;
			color: #aad6aa;
			border: 3px solid #d9ead9;
			text-align: center;
			font-size: 44px;
		}

		.modal-body .icon .glyphicon {
			top: 11px;
		}

		.modal-p {
			margin: 20px auto;
		}

		.modal-body .modal-p h2 {
			text-align: center;
		}

		.modal-body .modal-p p {
			text-align: center;
			color: #666;
			font-size: 16px;
			padding-top: 8px;
			font-weight: 300;
		}

		.modal-p .btn {
			width: 100px;
			height: 40px;
		}
		.modal-error .icon {
			color: #f27474;
			border: 3px solid #f27474;
		}


	</style>
</head>
<#--<body class="bodyimg">-->
<body class="bodyimg">>

<div class="cotn_principal">
	<div class="cont_centrar" style="top:5%;">
		<div class="cont_login">
			<form action="logins" method="post" onsubmit="return check();">
				<div id="login-box">
					<div class="alert alert-danger alert-dismissible"  role="alert" style="position: absolute;padding: 11px;display: none">
						错误信息: <span class="error-mess"></span>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close" style="right:0px;"><span aria-hidden="true">&times;</span></button>
					</div>
					<h1>Login</h1>
					<div class="input-box">
						<i class="iconfont">&#xe609;</i>

						<input type="text" autofocus="autofocus" value="${(userName)!''}" name="userName" placeholder="UserName" />
					</div>
					<div class="input-box">
						<i class="iconfont">&#xe605;</i>
						<input type="password"  value="" name="password" placeholder="UserPassword" />
					</div><br>
					<input type="text"  style="margin-bottom: 20px;width:152px" name="code" class="code test" placeholder="验证码"/>
					<div class="login-img" style="display:inline-block">
						<img class="iconfont" onclick="this.src='captcha?r'+Date.now()" src="captcha" alt="验证码" style="width: 100px;height: 42px;border-radius: 3px;">
					</div>
					<button type="submit" >Sign in</button>
				</div>

			</form>
		</div>
		<div style="border: 1px solid transparent; ">
			<h3 style="color: #6f6f6f; font-size: 35px;margin-top: 40px;" >@欢迎使用智慧办公自动化系统~</h3>

		</div>
	</div>
</div>
<div  class="modal fade in" id="mymodal" data-backdrop="static" >
	<div class="modal-dialog" style="top: 20%;">
		<div class="modal-content">
			<div class="modal-body modal-error">
				<div class="icon">
					<span class="glyphicon">!</span>
				</div>
				<div class="modal-p">
					<!--<h2 style="text-align: center;">提示信息</h2>-->
					<p class="modal-error-mess">该用户已经登录了，是否继续 ？</p>
					<div class="modal-p">
						<button type="button" class="btn btn-default" data-dismiss="modal" >取消</button>
						<button type="button" class="btn btn-primary contiue" data-dismiss="modal">继续</button>
					</div>
				</div>
			</div>

		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<#if hasmess??>
	<script type="text/javascript">
		$(function(){
			$('#mymodal').modal('show');
		})
	</script>
</#if>
<#if errormess??>
	<script>
		$(function(){
			console.log("fdsfdsfsfasdf");
			$('.error-mess').text('${errormess}');
			$('.alert-danger').css('display','block');
		})
	</script>
</#if>
<script type="text/javascript">
	$('.test').on('click',function(){
		$(this).css('border',"1px solid transparent");
	});
	$('.contiue').on('click',function(){
		location.href="/handlehas";
	});


	function check() {
		var userName=$('.userName').val().trim();
		var password=$('.password').val().trim();
		var code=$('.code').val().trim();
		console.log(userName);
		console.log(password);
		console.log(code);
		var count=1;
		if(userName==null || userName==""){
			$('.error-mess').text("登录账号不能为空!");
			$('.alert-danger').css('display','block');
			$('.userName').css('border-color',"#a94442");
			count=0;
			return false;
		}
		if(password==null || password==""){
			$('.error-mess').text("登录密码不能为空!");
			$('.alert-danger').css('display','block');
			$('.password').css('border-color',"#a94442");
			count=0;
			return false;
		}
		if(code==null || code==""){
			$('.error-mess').text("验证码不能为空!");
			$('.alert-danger').css('display','block');
			$('.code').css('border-color',"#a94442");
			count=0;
			return false;
		}
		console.log(count);
		return true;
	}

</script>
</body>
</html>